<template>
  <el-dialog :title=" isAdd ? '添加菜单' : '编辑菜单'" :visible.sync="isShow" center :before-close="cancel">
  <el-form :model="userInfo" :rules='rules' ref='form'>
    <el-form-item label="所属角色" label-width="120px" prop="roleid">
      <el-select v-model="userInfo.roleid" placeholder="请选择所属角色">
        <el-option label="请选择所属角色" value=""></el-option> 
        <el-option v-for='item in get_roleList' :key='item.id' :label="item.rolename" :value="item.id"></el-option> 
      </el-select>
    </el-form-item>

    <el-form-item label="用户名称" label-width="120px" prop="username">
      <el-input v-model="userInfo.username"></el-input>
    </el-form-item>

    <el-form-item label="密码" label-width="120px">
      <el-input v-model="userInfo.password"></el-input>
    </el-form-item>


    <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="userInfo.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="2"
        >
        </el-switch>
      </el-form-item>

    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="sure">确 定</el-button>
  </div>
</el-dialog>
</template>

<script>
import {mapGetters,mapActions} from "vuex"
import {useradd} from "@/request/api.js"
export default {
    //接收来自父组件的数据
    props:["isShow","isAdd"],
    data(){
        return {
          userInfo:{
            roleid:"",//角色编号，如果是string，则不能添加进数据库number
            username:"",//管理员名称string
            password:"",//密码string
            status:1, //状态  1正常2禁用
          },
           //定义表单验证规则
        rules: {
          username: [
            { required: true, message: "请输入用户名称", trigger: "blur" },
            { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
          ],
          roleid: [{ required: true, message: "请选择角色编号", trigger: "change" }],
        },
        }
    },
    //方法
    methods:{
      ...mapActions({
        action_roleList:"role/action_roleList"
      }),
        //1.点击取消按钮，关闭弹框
        cancel(){
            //a.通知父组件修改数据-关闭弹框 isShow修改父组件的数据  子传父
            this.$emit("cancel")
        },

        //3.重置
        

        //2.点击确定按钮
        sure(){
           //a.判断表单验证是否通过
           this.$refs.form.validate(async val=>{
              if(!val){
                return ; //没有通过，不进行任何操作
              }
              //b.添加/编辑
              if(this.isAdd){
                  try{
                    let res = await useradd(this.userInfo);
                    if(res.code == 200){
                      //提示
                      this.$message.success(res.msg);
                      //关闭弹框
                      this.cancel();
                      //同步数据，更新页面
                    }else{
                      this.$message.warning(res.msg)
                    }
                  }catch(error){
                    this.$message.error(error)
                  }
              }else{
                  console.log("编辑")
              }
           })   
        }
    },
    computed:{
      ...mapGetters({
        get_roleList:"role/get_roleList"
      })
    },
    mounted(){
      if(this.get_roleList.length == 0){
        this.action_roleList();
      }
    }
}
</script>

<style>

</style>